<template>
  <div class="app-page">
    <aside-tree
      title="商品分类"
      :tree-data="treeData"
      :loading="$loadingPlugin.getGoodsTypeTreeData"
      :parent-handle="true"
      @currentChange="currentChange"
      @refresh="getGoodsTypeTreeData"
    />
    <div class="content">
      <!-- <p>当前选择商品类型名称: {{ currentGoodsType ? currentGoodsType.gtName : '' }}</p>
      <p>当前选择商品类型id: {{ currentGoodsType ? currentGoodsType.gtId : '' }}</p> -->
      <el-tabs ref="goodListManageTab" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-if="$hasTabPermission(100101)" label="商品列表" name="first">
          <goodsList ref="goodsList" :current-goods-type="currentGoodsType" />
        </el-tab-pane>
        <el-tab-pane v-if="$hasTabPermission(100102)" label="商品型号" name="second">
          <goodsType ref="goodsType" :current-goods-type="currentGoodsType" />
        </el-tab-pane>
        <el-tab-pane v-if="$hasTabPermission(100103)" label="商品规格" name="third">
          <goodsSize ref="goodsSize" :current-goods-type="currentGoodsType" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import { goodsTypeQueryAllList } from '@/api'
  import getTreeData from '@/utils/jsonTree'

  export default {
    name: 'goodsSetiing',
    components: {
      AsideTree: require('../../components/GoodsTypeTree').default,
      goodsList: require('./components/goodsList').default,
      goodsType: require('./components/goodsType').default,
      goodsSize: require('./components/goodsSize').default
    },
    data() {
      return {
        treeData: [],
        currentGoodsType: null,
        activeName: 'first'
      }
    },
    created() {
      this.getGoodsTypeTreeData()
    },
    mounted() {
      this.activeName = this.$refs.goodListManageTab.panes[0].name
    },
    methods: {
      // 获取树图数据
      async getGoodsTypeTreeData() {
        const res = await goodsTypeQueryAllList({})
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.treeData = getTreeData(data, 'parentId', 'gtId')
      },
      // 选择变化
      async currentChange(current) {
        this.currentGoodsType = current
        if (this.activeName === 'first') this.$refs.goodsList.getTableData()
        else if (this.activeName === 'second') this.$refs.goodsType.getTableData()
        else this.$refs.goodsSize.getTableData()
      },
      // 点击tabs
      handleClick(tab) {
        this.activeName = tab.name
        if (this.activeName === 'first') this.$refs.goodsList.getTableData()
        else if (this.activeName === 'second') this.$refs.goodsType.getTableData()
        else this.$refs.goodsSize.getTableData()
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .content {
    flex: 1;
    width: 0;
    padding: 0 10px 0 10px;
  }
}
</style>
